import React, { Component } from 'react';

// 导入封装的方法(首页导航)
import { getNav } from '../../api/index'

import pic from '../../assets/5.jpg'
import '../../styles/Home/MyClassify.css'

class MyClassify extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tip:'一份抵一元。请您点击查看此处《购物须知》。',
            className:[]
        }
    }
    componentDidMount(){
        getNav().then(res=>{
            console.log(res.data.list);
            this.setState({className:res.data.list})
        })
    }
    render() {
        return (
            <div className='classList'>
                <p>{this.state.tip}</p>
                <div className='box'>
                    {
                        this.state.className.length !== '0' ? this.state.className.map((item,index)=>{
                            return (
                                <div className='list-box' key={index}>
                                    <img src={item.pic} alt="" />
                                    <span>{item.name}</span>
                                </div>
                            )
                        }) : <div>网络异常，请重新刷新页面</div>
                    }
                </div>
                
            </div>
        );
    }
}

export default MyClassify;